<template>
  <div class="box">
    <div class="img">
      <img
        src="https://award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png"
        alt=""
      />
    </div>
    <div class="conent">
      <van-tabs v-model:active="active" color="#f86442" line-width="140px">
        <!-- 验证码登录 -->
        <van-tab title="验证码登录">
          <van-cell-group inset>
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field
              class="van-field"
              v-model="phone"
              type="tel"
              label="请输入手机号"
            />
          </van-cell-group>
          <!-- 按钮 -->
          <van-button class="but" type="primary" size="large"    :color="phone ? '#f86442' : '#ccc'"
            >登录</van-button
          >
        </van-tab>
        <!-- 密码登录 -->
        <van-tab title="密码登录">
          <van-form @submit="onSubmit" validate-trigger="onBlur">
            <van-cell-group inset>
              <!-- 输入手机号，调起手机号键盘 -->
              <van-field
                class="van-field"
                v-model="phone"
                type="tel"
                label="请输入手机号"
                :rules="[regPhone]"
              />
              <!-- 输入密码 -->
              <van-field
                class="van-field"
                v-model="password"
                type="password"
                label="请输入密码"
              />
              <!-- 按钮 -->
              <van-button
                @click.prevent="goLogin"
                class="but"
                type="submit"
                size="large"
                :color="phone&&password ? '#f86442' : '#ccc'"
                >登录</van-button
              >

              <p class="p">邮箱登录</p>
            </van-cell-group>
          </van-form>
        </van-tab>
        <!-- 隐私政策 -->
        <div class="check">
          <div class="check_ch">
            <van-checkbox
              icon-size="16px"
              v-model="checked"
              checked-color="#f86442"
            ></van-checkbox
            >首次登录会自动创建新账号,且代表同意<span>《用户服务</span>
          </div>
          <div><span>协议》</span>和<span>《隐私政策》</span></div>
        </div>
      </van-tabs>
    </div>
    <!-- 其他方式登录 -->
    <div class="divider">
      <van-divider
        :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"
      >
        其他登录方式
      </van-divider>
    </div>
    <!-- qq 微信 -->
    <div class="qqwb">
      <div class="qq">
        <van-icon name="qq" />
      </div>
      <div class="wb">
        <van-icon name="weibo" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { reqLogin } from "@/api/login/index";
import router from "@/router/index";
import { log } from "console";
// import { log } from 'console';

const phone = ref<any>("");
const password = ref<any>("");
const token = ref();
// 手机号验证规则
const regPhone = {
  required: true,
  message: '请填写正确的手机号',
  pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
};

const checked = ref(true);

// 登录按钮回调
const goLogin = () => {
  // if(phone.value == '13700000000' && password.value == '111111'){
  //   router.push("/home")
  // }
  // phone.value = "";
  // password.value = "";
  onSubmit();
  console.log(phone.value);
  console.log(password.value);

  
};

// 登录表单回调
const onSubmit = () => {
  console.log('执行了');
    getLogin();
  
}

const getLogin = async () => {
  const result = await reqLogin({
    phone: "13700000000",
    password: "111111",
  });
  // console.log(result);
  if (result.code == 200) {
    token.value = result.data.token
    localStorage.setItem('TOKEN',result.data.token)
    if(token){
      router.push("/home")
    }
  }
};
</script>

<style scoped lang="less">
.box {
  padding: 0 20px;
  position: relative;
  .img {
    width: 177px;
    height: 75px;
    margin: 30px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //
  .conent {
    .but {
      border-radius: 30px;
      margin-top: 20px;
    }
    .van-field {
      border-bottom: 1px solid #ddd;
    }
    .check {
      width: 85%;
      margin: 0 auto;
      font-size: 12px;
      text-align: center;
      margin-top: 15px;
      color: #999;
      span {
        color: #f86442;
      }
      .check_ch {
        display: flex;
      }
      .checkb {
        width: 15px;
        height: 15px;
      }
    }
    .p {
      font-size: 12px;
    }
  }
  //
  .divider {
    width: 100%;
    position: absolute;
    top: 450px;
    left: 0;
    font-size: 12px;
  }
  .qqwb {
    width: 300px;
    height: 50px;
    // background: red;
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    font-size: 33.5px;
    text-align: center;
    line-height: 50px;
    top: 500px;
    left: 0;
    margin-left: 37.5px;
    .qq {
      width: 50px;
      height: 50px;
      background: rgb(84, 190, 225);
      color: #fff;
      border-radius: 50%;
    }
    .wb {
      width: 50px;
      height: 50px;
      background: rgb(236, 94, 94);
      color: #fff;
      border-radius: 50%;
    }
  }
}
</style>
